<template>
  <div class="tools_box">
    <div v-if="type_info === '添加'">

      <!-- 头部按钮控件 -->
      <el-button type="success" size="small" @click="add" class="ipv6addClick">{{$t('添加')}}</el-button>
      <el-button type="danger" slot="reference" size="small" @click="del_addr" class="ipv6delClick">{{$t('删除')}}</el-button>
    </div>

    <!-- 弹窗页面 -->
    <el-dialog :close-on-click-modal='false' v-drag :title="$t(type_info)" :v-if="dialogFormVisible" :visible.sync="dialogFormVisible" top="20vh" :width="lang==='zh' ? '420px':'680px'">

      <!--       添加页面-->
      <Ipv6Edit ref="child_form" v-if="type_info === '添加'" v-bind:type_info="type_info" @childForm="handleChildForm($event)"></Ipv6Edit>

      <!-- 弹窗控件 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getChildData" class="ipv6addSubmit">{{$t('确 定')}}</el-button>
        <el-button @click="close" class="ipv6addClose">{{$t('取 消')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { delIpv6, addIpv6 } from '@/api/network/route/staticRoute'
import { editServiceData } from '@/api/list/server'
import Ipv6Edit from './Ipv6Edit'
export default {
  props: [
    'edit_form',
    'type_info',
    'multipleSelection'
  ],
  name: 'Tools',
  components: {
    Ipv6Edit
  },
  data () {
    return {
      lang: this.$i18n.locale,
      form: {},
      dialogFormVisible: false,
      visible: false
    }
  },
  watch: {
    edit_form: {
      handler (val) {
        this.form = val
      },
      immediate: true
    }
  },
  methods: {
    edit_info () {
      this.dialogFormVisible = true
    },
    getChildData () {
      this.$refs.child_form.send_form()
    },
    handleChildForm (data) {
      let formData = {}
      formData = data

      // let url = ''
      if (this.type_info === '添加') {
        // url = 'static_route/addIpv6/'
        addIpv6(formData).then((response) => {
          if (response.status === 0) {
            this.form = {}
            this.$messages.success(response.msg)
            this.close()
            this.$emit('listData')
          } else {
            this.$messages.error(response.msg)
          }
        })
      } else {
        // url = 'service/editService/'
        editServiceData(formData).then((response) => {
          if (response.status === 0) {
            this.form = {}
            this.$messages.success(response.msg)
            this.close()
            this.$emit('listData')
          } else {
            this.$messages.error(response.msg)
          }
        })
      }
      // this.$axios.post(url, this.$qs.stringify(formData)).then((response) => {
      //   if (response.status === 0) {
      //     this.dialogFormVisible = false
      //     this.form = {}
      //     this.$messages.success(response.msg)
      //     this.reload()
      //   } else {
      //     this.$messages.error(response.msg)
      //   }
      // })
    },
    close () {
      this.dialogFormVisible = false
      this.$refs.child_form.close()
    },
    del_addr () {
      this.visible = false
      if (this.multipleSelection.length === 0) {
        this.$messages.error(this.$t('请至少选择一条数据进行删除'))
        return
      }
      let flag = false
      this.multipleSelection.forEach(item => {
        if (item.type === 2) {
          flag = true
        }
      })
      if (flag) {
        this.$messages.error(this.$t('直连路由不能删除'))
        return
      }
      this.$confirm(this.$t('您是否要删除所有选中的数据？'), this.$t('提示'), {
        closeOnClickModal: false,
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        confirmButtonClass: 'confirmButton',
        cancelButtonClass: 'confirmCancelButton',
        type: 'warning'
      }).then(() => {
        let formData = {}

        formData.del_info = JSON.stringify(this.multipleSelection)

        delIpv6(formData).then((response) => {
          if (response.status === 0) {
            this.$messages.success(this.$t('删除成功'))
            this.$emit('listData')
          } else if (response.status === -1) {
            this.$messages.error(response.msg)
            this.$router.push('/login')
          } else {
            this.$messages.error(response.msg)
          }
        })
      })
    },
    add () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style scoped>
.tools_box {
  text-align: left;
}
</style>
